<script setup lang="ts">
import type { StudentCourseListCoursesItem } from '@/api/types/student'
import Tag from '@/components/Tag.vue'
import ProgressItemTag from './ProgressItemTag.vue'

defineProps<{
  course: StudentCourseListCoursesItem
}>()
</script>

<template>
  <!-- 课程列表 -->
  <view class="course-item">
    <view class="course-title">
      {{ course.course.name }}
      <Tag v-if="course.course.completed" text="已学完" type="warning" round size="small" />
    </view>
    <view class="progress-section">
      <view v-if="course.wordSummary.shorthandNum" class="learned-tag">
        已学单元
        <!-- <uni-icons custom-prefix="zj" type="icon-yousanjiao" size="30" class="right-icon" /> -->
      </view>

      <ProgressItemTag
        label="单词学习"
        :current="course.wordSummary.shorthandNum"
        :total="course.wordSummary.totalNum"
      />

      <!-- <ProgressItemTag
        label="语法练习"
        :current="8"
        :total="10"
        :is-expired="false"
      /> -->
    </view>
  </view>
</template>

<style lang="scss" scoped>
.course-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    border: 1rpx solid transparent;
    cursor: pointer;
    position: relative;

    &:hover{
        border-color: $uni-color-primary;
    }

    .course-title {
        font-size: 32rpx;
        // font-weight: bold;
        color: #333;
        display: flex;
        align-items: center;
        margin-bottom: 26rpx;
    }

    .progress-section {
        display: flex;
        flex-wrap: wrap;
        gap: 16rpx;
        align-items: center;

        .learned-tag {
            background-color: $uni-color-primary;
            color: #fff;
            font-size: 12px;
            padding: 4rpx 6rpx;
            margin-left: -25rpx;
            border-radius: 0;
            font-weight: normal;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;

            .right-icon{
                position: absolute;
                right: 0;
                color: $uni-color-primary;
            }
        }

    }
}
</style>
